<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        var stus = ["冯云飞", "敖骞", "胡建辉", "付尚武", "夏祥平", "刘梦", "刘友财", "高坤", "温仕嘉", "陈佳彧", "王若丞", "白云", "唐永志", "谭文魏", "二毛"];
		var stu_total_no = 10; // 测试题数目
		var test_stu_no = 4; // 考生人数
		var unit_test_no = 2; // 每位考生考题数
        var test_arr = []; // 随机试题
        var prev = [];  // 上一次考试学生的id
        var status = false;
        function loop() {
            for (let i = 0; i < stus.length; i++) {
                let cell_html = "<div class='stu'>" + stus[i] + "</div>"
                $("#cell" + (i + 1)).append(cell_html)
            }
        }
		
		//比较函数
		var compare = function (x, y) {
			if (x < y) {
				return -1;
			} else if (x > y) {
				return 1;
			} else {
				return 0;
			}
		}

        /**
         * 获取随机试题
         */
		function random_test_arr() {
            // 获取随机题
            test_arr = [];
            while(test_arr.length != test_stu_no * unit_test_no) {
                let st = (Math.floor(Math.random() *  stu_total_no) + 1);
                let has = false;

                for (let i = 0; i < test_arr.length; i++) {
                    if (test_arr[i] == st) {
                        has = true;
                    }
                }

                if (!has) {
                    test_arr[test_arr.length] = st;
                }
            }
        }

        function start() {
		    if (status == "false") {
		        return;
            }
            // 随机选择8个题
            // 随机选择4位考生
            random_test_arr();
            let current = [];
            while(current.length != test_stu_no) {
                let st = (Math.floor(Math.random() * stus.length) + 1);
                let current_has = false;

                for (let i = 0; i < current.length; i++) {
                    if (current[i] == st) {
                        current_has = true;
                    }
                }

                if (!current_has) {
                    current[current.length] = st;
                }
            }

            // 清除上一次备选
            for (let i = 0; i < prev.length; i++) {
                $("#cell" + prev[i]).empty();
                let cell_html = "<div class='stu'>" + stus[prev[i] - 1] + "</div>";
                $("#cell" + prev[i]).append(cell_html)
                $("#cell" + prev[i]).css("background-color", "grey")
            }

            for (let i = 0; i < current.length; i++) {
                let tmp_test = test_arr.slice(i * unit_test_no, (i + 1) * unit_test_no);
                tmp_test.sort(compare);
                let cell_html = "<div class='stu' style='line-height: 28px;padding-top:20px'>" + stus[current[i] - 1] + "<br/>(" + tmp_test[0] + "," + tmp_test[1] + ")</div>"

                $("#cell" + current[i]).empty();

                $("#cell" + current[i]).append(cell_html)
                $("#cell" + current[i]).css("background-color", "red")
            }

            prev = current;
        }

        $().ready(function() {
            $("#start").click(function() {
                status = true;
            })
            $("#stop").click(function() {
                status = false;
            })
            setInterval(start, 100);
        });
    </script>
    <style>
        body{
            margin:0;
            padding:0;
        }

        article{
            width:440px;
            margin: 100px auto 10px;
        }
        footer{
            width:220px;
            margin: 10px auto;
        }

        .cell {
            width:100px;
            height:100px;
            background-color:grey;
            float:left;
            margin:5px;
        }

        .stu{
            font-size:22px;
            color:#fff;
            line-height:100px;
            text-align:center;
        }
        .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
        .clearfix { *zoom:1; }

        button{
            width:105px;
        }
    </style>
</head>
<body onload="loop()">
<article class="clearfix">
    <div class="cell" id="cell1"></div>
    <div class="cell" id="cell2"></div>
    <div class="cell" id="cell3"></div>
    <div class="cell" id="cell4"></div>
    <div class="cell" id="cell5"></div>
    <div class="cell" id="cell6"></div>
    <div class="cell" id="cell7"></div>
    <div class="cell" id="cell8"></div>
    <div class="cell" id="cell9"></div>
    <div class="cell" id="cell10"></div>
    <div class="cell" id="cell11"></div>
    <div class="cell" id="cell12"></div>
    <div class="cell" id="cell13"></div>
    <div class="cell" id="cell14"></div>
    <div class="cell" id="cell15"></div>
    <!--<div class="cell" id="cell16"></div>
    <div class="cell" id="cell17"></div>-->
</article>
<footer>
    <button id="start">开始</button>
    <button id="stop">结束</button>
</footer>
</body>
</html>